import {useState} from "react";
import styles from './index.module.css'
import {Link,useNavigate} from "react-router-dom";
import {Card, Button, Checkbox, Form, Input,message} from "antd";
import {admin} from '../../../api'

function Login(props) {
    let navigate = useNavigate()

    const onFinish = async (values) => {
        let {status,msg,data} = await admin.login(values)
        if(status){
            sessionStorage.setItem('token',data.token)
            sessionStorage.setItem('id',data.id)
            sessionStorage.setItem('role',data.role)
            navigate('/goods/list')
        }else{
            message.warn(msg)
        }
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div className={styles.bg}>
            <Card title={'登录'} className={styles.login_card}
                actions={[
                    <Link to={'/register'}>注册账户</Link> ,
                    <Link to={'/forgetpwd'}>忘记密码？</Link> ,
                    ]}>
                <Form
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 20,
                    }}
                    autoComplete="off"
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="账号"
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                                trigger: 'blur'
                            },
                            {min: 3, max: 30, message: '账号长度在3-30个字符之间', trigger: 'blur'}
                        ]}
                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your password!',
                                trigger: 'blur'
                            },
                            {min: 3, max: 30, message: '密码长度在3-30个字符之间', trigger: 'blur'}
                        ]}
                    >
                        <Input.Password/>
                    </Form.Item>

                    <Form.Item
                        name="remember"
                        valuePropName="checked"
                        wrapperCol={{
                            span: 12,
                        }}
                    >
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            span: 10,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Login